<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="add">设置</button>
    <button class="get">获取</button>
</body>
<script>
    // cookie的创建
    // 1. cookie的存取 都依赖于document.cookie 
    // 2. 以键值对的形式存在 (key=value)
    // 3. 存的时候一条一条存储的,取的时候,将所有的cookie整合到一个字符串中用"; "分隔

    // cookie的时效性 => cookie可以设置过期时间
    // 默认情况下 cookie在浏览器关闭时过期,如果想自定义过期时间,需要给cookie添加expires修饰,expires接收一个字符串类型的时间(世界时)

    // date.toString()   日期对象转字符串(北京时间)
    // date.toUTCString() 日期对象转字符串(格林威治时间 => 世界时)


    // cookie之跨页面访问 => cookie可以设置存储路径
    // cookie默认存储在文件所在的目录, 该目录及其子目录下所有的文件均可以访问cookie, 如果自己的cookie存储路径,需要借助path属性修饰;  path要接收一个自 站点根目录 起的路径(/day31),且路径中不能使用中文


    var addBtn = document.getElementsByClassName("add")[0];
    var getBtn = document.getElementsByClassName("get")[0];


    // 设置存储路径
    addBtn.onclick = function () {
        setCookie("user","a123123",365*24*60*60);
        setCookie("pwd","123123");
        setCookie("phone","17386141517",7*24*60*60);
        setCookie("email","123123@qq.com",7*24*60*60);
    }

    // cookie的存储都依赖于document.cookie
    // 将所有的cookie整合到一个字符串中用"; "分隔
    getBtn.onclick = function () {
        console.log(document.cookie);

        console.log(getCookie("user"));
        console.log(getCookie("pwd"));
        console.log(getCookie("phone"));
        console.log(getCookie("email"));
        console.log(getCookie("age"));


    }

    // setCookie(name,val,expires,path=/);
    // getCookie(name);


    function setCookie(name, value, expires=undefined, path = "/") {
        if(expires == undefined){  // expires没有接收任何参数
            document.cookie = name + "=" + value + ";path="+ path;
        }else{
            var date = new Date();
            date.setSeconds(date.getSeconds() + expires); // 以秒为单位

            document.cookie = name + "=" + value + "; expires=" + date.toUTCString() + ";path="+ path;
        }
    }

    /* function getCookie(name){ // 先将所有cookie解析为对象,在从对象中取值 
        var data = {}
        var cookie = document.cookie;
        if (cookie) {
            var list = cookie.split("; ");
            console.log(list);
            for (var i = 0; i < list.length; i++) {
                var item = list[i];
                var key = item.split("=")[0];
                var value = item.split("=")[1];
                data[key] = value;
            }
        }
        console.log(data);
        return data[name]||"";
    } */

    function getCookie(name){ // 先将所有cookie解析为对象,在从对象中取值 
        var cookie = document.cookie;
        if (cookie) {
            var list = cookie.split("; ");
            for (var i = 0; i < list.length; i++) {
                var item = list[i];
                var key = item.split("=")[0];
                var value = item.split("=")[1];
                if(key === name){
                    return value;
                }
            }
        }
        return "";
    }



</script>

</html>